<% @page_title = "Choose an account" %>

<% cache [ Current.identity, @accounts ] do %>
  <div
    class="panel panel--centered flex flex-column gap-half"
    style="--popup-icon-size: 24px; --popup-item-padding-inline: 0.5rem;"
  >
    <% if @accounts.any? %>
      <h1 class="txt-x-large font-weight-black margin-none">
        Your Fizzy accounts
      </h1>
      <menu class="popup__list pad border-radius border">
        <% @accounts.each do |account| %>
          <li class="popup__item txt-medium">
            <%= icon_tag "marker", class: "popup__icon" %>
            <%= link_to landing_url(script_name: account.slug), class: "btn overflow-ellipsis fill-transparent popup__btn" do %>
              <strong><%= account.name %></strong>
            <% end %>
          </li>
        <% end %>
      </menu>
    <% else %>
      <h1 class="txt-x-large font-weight-black margin-none">Hmm...</h1>
      <p class="margin-none-block-start">You don’t have any Fizzy accounts.</p>
    <% end %>

    <div class="margin-block-start">
      <%= link_to new_signup_path, class: "btn btn--plain txt-link center txt-small", data: { turbo_prefetch: false } do %>
        <span>Sign up for a new Fizzy account</span>
      <% end %>
    </div>
  </div>
<% end %>

<% content_for :footer do %>
  <%= render "sessions/footer" %>
<% end %>
